<template>
  <div class="my_class">
      <div class="class_all">
          <div class="class_one" v-for="item in classlisttt" :key="item.id" @click="godetail(item.id)">
                <img :src="item.image_url" alt="">
                    <p>{{item.name}}</p>
                <div class="rate_user">
                    <a-rate :default-value="item.grade" disabled  allow-half/>
                        <span>发布人：{{item.teacher_name}}</span>
                </div>
                <div class="detail">
                    <div class="bottom_left">
                        <span>{{item.add_time}}</span>
                    </div>
                    <div class="bottom_right">
                        <span><a-icon type="eye" />{{item.click_nums}}</span>
                            <span><a-icon type="like" />{{item.give_like_nums}}</span>
                    </div>
                </div>
          </div>
      </div>
          <div class="qezcz" style="text-align:center">
            <a-pagination v-model="current" size="small" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items />
          </div>
  </div>
</template>

<script>
import {getmyclassData} from '../../api/usercenter'
export default {
    data() {
        return {
            current:1,
            pageSize:8,
            total:0,
            classlisttt:[]
        }
    },
    methods:{
        godetail(id){
            this.$router.push({path:'/videodetail',query:{id:id}})
        },
        currentpage(val){
            this.current = val
            this.gogogog()
        },
        gogogog(){
            let page = this.current
            let page_size = this.pageSize
            getmyclassData(page,page_size).then(res=>{
                this.classlisttt = res.results
                this.total = res.count
            })
        }
    },
    created(){
        this.gogogog()
    }
}
</script>

<style lang='less'>
.my_class{
    .class_all{
        overflow: hidden;
            .class_one{
                width: 25%;
                border: 1px solid gainsboro;
                border-radius: 14px;
                transform: scale(0.8);
                float: left;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 14vh;
                }
                p{
                    margin: 0.5vh 0 0.8vh 0;
                    font-size: 1vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding-left: 10px;
                }
                .rate_user{
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px 0 5px;
                    .ant-rate-star:not(:last-child){
                        width: 15px;
                    }
                    .ant-rate-star:not(:last-child){
                        margin-right: 3px!important;
                    }
                    span{
                        font-size: 12px;
                        margin-top: 8px;
                    }
                }
                .detail{
                    display: flex;
                    justify-content: space-between;
                    padding: 0 7px 10px 9px;
                    .bottom_right{
                        span{
                            margin-left: 5px;
                        }
                    }
                }
            }
    }
}
</style>